<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <div id="dome1"></div>
    <div id="dome2"></div>
    <div id="dome3"></div>
     <!-- 1引入核心 -->
     <script type="text/javascript" src="./17.0.1/react.development.js"></script>
     <!-- 2扩展库-->
     <script type="text/javascript" src="./17.0.1/react-dom.development.js"></script>
     <!-- 3引入babel，用于将jsx转为js-->
     <script type="text/javascript" src="./17.0.1/babel.min.js"></script>
    <!-- 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="./17.0.1/prop-types.js"></script>

    <!-- 一、旧生命周期 -->
    <!-- <script type="text/babel">
        class Count extends React.Component{
            constructor(props){
                console.log('1.构造器-Count-constructor')
                super(props)
                //初始化状态
                this.state = {count:0}
            }
           

            //加1按钮的回调
            add = () =>{
                const {count} = this.state
                console.log('更新模式1','1.更新状态-setState')
                //更新状态
                this.setState({
                    count:count+1
                })
            }
           
            componentWillMount(){//组件将要挂载
                console.log('2.组件将要挂载-Count-componentWillMount')

            }

            componentDidMount(){//组件挂载完毕之后
                console.log('4.组件挂载之后-Count-componentDidMount')
            }

            componentWillUnmount(){//组件将要卸载
                console.log('6.组件将要卸载-Count-componentWillUnmount')
            }


             //组件将要卸载的钩子-控制组件更新的阀门-如果不写默认是true,
             shouldComponentUpdate(){
                console.log('更新模式1','2.组件将要卸载的钩子-shouldComponentUpdata')
                return true //阀门
             }

             //组件将要更新
             componentWillUpdate(){
                console.log('更新模式1','3.组件将要更新-componentWillUpdate')
                console.log('更新模式2','2.强制更新-componentWillUpdate')
             }

             //组件更新完毕的钩子
             componentDidUpdate(){
                console.log('更新模式1','5.组件更新完毕的钩子-componentDidUpdate')
                console.log('更新模式2','4.组件更新完毕的钩子-componentWillUpdate')
             }

            
            death = () =>{//组件卸载,不再渲染html
                console.log('5.组件卸载,不再渲染html-Count-unmountComponentAtNode')
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }


            //强制更新
            fore = () =>{
                console.log('更新模式2','1.强制更新-forceUpdate')

               this.forceUpdate()
            }


            render(){
                console.log('3.渲染组件-Count-render')

                const {count} = this.state

                return(
                    <div>
                        <h2>当前求和为：{count}</h2>    
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.fore}>不更改任何状态中的数据，强制更新一下</button>


                    </div>
                )
            }
        }

        class A extends React.Component{
            //初始化状态
            state = {carName:'奔驰'}

            changeCar = () =>{
                this.setState({
                    carName:'奥托'
                })
            }

            render(){
                return(
                   <div>
                        <div>A</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}/>
                    </div>  
                )
            }
        }


        class B extends React.Component{
            componentDidMount(){
                console.log('更新模式3','1.这是个坑-组件挂载之后-componentDidMount')
            }
            //组件将要接收新的props的钩子
            componentWillReceiveProps(){
                console.log('更新模式3','2.组件将要接收新的props的钩子-componentWillReceiveProps')
            }

             //组件将要卸载的钩子-控制组件更新的阀门-如果不写默认是true,
             shouldComponentUpdate(){
                console.log('更新模式3','3.组件将要卸载的钩子-shouldComponentUpdata')
                return true //阀门
             }
              //组件将要更新
              componentWillUpdate(){
                console.log('更新模式3','4.组件将要更新-componentWillUpdate')
             }

             //组件更新完毕的钩子
             componentDidUpdate(){
                console.log('更新模式3','6.组件更新完毕的钩子-componentDidUpdate')
             }
            render(){
                console.log('更新模式3','5.组件渲染html-render')

                return(
                    <div>我是B组件，接收到的车是：{this.props.carName }</div>
                )
            }
        }
        ReactDOM.render(<A/>,document.getElementById('test'))
    </script> -->






    <!-- 二、新生命周期-->
    <script type="text/babel">
        class Count extends React.Component{
            constructor(props){
                console.log('1.构造器-Count-constructor')
                super(props)
                //初始化状态
                this.state = {count:0}
            }
           

            //加1按钮的回调
            add = () =>{
                const {count} = this.state
                //更新状态
                this.setState({
                    count:count+1
                })
            }
        
            
            death = () =>{//组件卸载,不再渲染html
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }


            //强制更新
            fore = () =>{
                // console.log('更新模式2','1.强制更新-forceUpdate')

               this.forceUpdate()
            }

            // 若state的值在任何时候都取决于Props，那么可以使用getDerivedStateFromProps
            // 方法用的极其罕见-用的极低-了解就好 
            static getDerivedStateFromProps(props,state,){
                console.log('getDerivedStateFromProps',props,state)
                return null

            }


            //在更新之前获取快照
            getSnapshotBeforeUpdate(){
                console.log('getSnapshotBeforeUpdate','显示')
                return 'wangruike'
            }

            //组件挂载完毕之后
             componentDidMount(){
                console.log('组件挂载完毕之后-Count-componentDidMount')
            }

            //组件将要卸载
            componentWillUnmount(){
                console.log('组件将要卸载-Count-componentWillUnmount')

            }

             //组件更新完毕的钩子
             componentDidUpdate(){
                console.log('组件更新完毕的钩子-componentDidUpdate')
             }
            
             //组件将要卸载的钩子-控制组件更新的阀门-如果不写默认是true,
             shouldComponentUpdate(preProps,preState,snapshotvalue){
                console.log('组件将要卸载的钩子-shouldComponentUpdata',preProps,preState)
                return true //阀门
             }



            render(){
                console.log('Count-render')

                const {count} = this.state

                return(
                    <div>
                        <h2>当前求和为：{count}</h2>    
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.fore}>不更改任何状态中的数据，强制更新一下</button>


                    </div>
                )
            }
        }

      
        ReactDOM.render(<Count count='199'/>,document.getElementById('test'))
    </script>

</body>
</html>